<template>
    <div class="qilin-homepage qilin-pt-4 qilin-px-2 qilin-pb-8">
        <div class="qilin-homepage-box qilin-p-4">
            <h1>Qilin全栈管理系统</h1>
            <p class="qilin-mt-2">
                这里是作者本人平时开发的组件库和工具库，也有平时项目中的一些真实案例，全都是基于vue3.x开发，代码全部可见可粘贴，如果对大家有帮助的话，那就赶紧用起来吧~
            </p>
            <p class="qilin-mt-2 qilin-mb-2">
                关于vue2.x的开发库，请大家前往<span class="link" @click="gotoQilin2x">Qilin2.x</span>查看吧~
            </p>
            <p>有问题可以去<span class="link" @click="gotoGitee">Gitee</span>上联系我哦</p>
            <div class="box-item qilin-px-1 qilin-py-4">
                <div class="qilin-text-info" @click="router.push('/study/QilinUtils')">qilin-utils</div>
                <div>一个轻量的前端JavaScript工具库，专注于JavaScript，不关心UI。</div>
            </div>
            <div class="box-item qilin-px-1 qilin-py-4">
                <div class="qilin-text-info" @click="router.push('/study/qilin-element3x/1')">qilin-element3x</div>
                <div>基于element-plus封装的二次源组件，方便快捷，大幅提高开发效率，易于维护！</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {useRouter} from "vue-router";
const router=useRouter();

const gotoQilin2x=()=>{
    window.open("https://www.qilin-web.cn/study/QilinUtils?qilinToken=Bearer%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY0YTI3NTU3N2YzYmYwOTJlZjBhYTUyNyIsIm5hbWUiOiJFREctRmFucyIsImlkZW50aWZ5IjoiZW1wbG95ZWUiLCJpYXQiOjE2ODgzNjg0ODksImV4cCI6NDc5ODc2ODQ4OX0.9zbs-UkgFVarXZcIawZH3_6tSS8Ok7eTqqqdlYkiicE");
};

const gotoGitee=()=>{
    window.open("https://gitee.com/wang_zhenfei");
};

</script>

<style lang="scss" scoped>
.qilin-homepage{
    width:100%;
    >.qilin-homepage-box{
        width:100%;
        >h1{
            font-weight:bolder;
            text-align:center;
        }
        >.box-item{
            position: relative;
            >div:first-child{
                font-size:$size-text-large;
                font-weight:bolder;
                margin-bottom:$rem5;
                cursor:pointer;
            }
            >div:last-child{
                height:$rem30;
                display:flex;
                align-items:center;
                &::before{
                    content:"";
                    display: inline-block;
                    width:$rem5;
                    height:100%;
                    margin-right:$rem15;
                    background-color:$color-theme-common-dark;
                    border-radius: $radius-default;
                }
            }
        }
    }
}
</style>
